import { Layout, Playground, Attributes } from 'lib/components'
import { Button, Spacer, useBodyScroll, Text, Link } from 'components'

export const meta = {
  title: '锁定滚动 useBodyScroll',
  group: '工具包',
}

## useBodyScroll / 工具包

禁用 `Body` 或其他任何元素的滚动，这在显示弹窗或菜单时非常有帮助。

这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。

<Playground
  desc="点击按钮以锁定滚动."
  scope={{ Button, Spacer, useBodyScroll, Text }}
  code={`
() => {
  const [hidden, setHidden] = useBodyScroll()
  return (
    <>
      <Text small b type={hidden ? 'error' : 'default'}>{hidden ? '已禁用滚动。' : '当前可以滚动。'}</Text>
      <Spacer h={.75} />
      <Button scale={0.5} type="success" auto onClick={() => setHidden(true)}>禁用滚动</Button>
      <Spacer h={.5} />
      <Button ml="20px" scale={0.5} type="secondary" auto onClick={() => setHidden(false)}>重置</Button>
    </>
  )
}
`}
/>

<Attributes edit="/pages/zh-cn/components/use-body-scroll.mdx">
<Attributes.Title>useBodyScroll</Attributes.Title>

```ts
type BodyScrollOptions = {
  scrollLayer: boolean  //  指定元素内部是否需要滚动
}

const useBodyScroll = (
  elementRef?: RefObject<HTMLElement> | null,
  options?: BodyScrollOptions,
) => [boolean, Dispatch<SetStateAction<boolean>>]

```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
